import { Select } from 'antd';
import OStyle from './selectGradeColor.less';
function SelectGradeColor({ placeholder = '请选择', ...restProps }: any) {
  const element = (val: string, code: number) => {
    return (
      <div className="flexr alc">
        <span className={`${OStyle.colorSquare} ${OStyle.color + code}`}></span>
        <span>{val}</span>
      </div>
    );
  };
  const options = [
    {
      value: 1,
      label: element('橙色', 1),
    },
    {
      value: 2,
      label: element('蓝色', 2),
    },
    {
      value: 3,
      label: element('红色', 3),
    },
    {
      value: 4,
      label: element('紫色', 4),
    },
    {
      value: 5,
      label: element('绿色', 5),
    },
    {
      value: 6,
      label: element('黄色', 6),
    },
    {
      value: 7,
      label: element('青色', 7),
    },
    {
      value: 8,
      label: element('桃色', 8),
    },
    {
      value: 9,
      label: element('金色', 9),
    },
    {
      value: 10,
      label: element('褐色', 10),
    },
    {
      value: 11,
      label: element('浅灰色', 11),
    },
    {
      value: 12,
      label: element('亮灰色', 12),
    },
    {
      value: 13,
      label: element('浅绿色', 13),
    },
    {
      value: 14,
      label: element('海蓝色', 14),
    },
    {
      value: 15,
      label: element('琉璃色', 15),
    },
    {
      value: 16,
      label: element('橘红色', 16),
    },
    {
      value: 17,
      label: element('天蓝色', 17),
    },
    {
      value: 18,
      label: element('葡萄紫', 18),
    },
    {
      value: 19,
      label: element('墨绿色', 19),
    },
    {
      value: 20,
      label: element('紫红色', 20),
    },
  ];

  return (
    <Select
      options={options}
      {...restProps}
      placeholder={placeholder}
      getPopupContainer={(triggerNode) => document.body}
    />
  );
}

export { SelectGradeColor };
